<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block data-th-replace="/adminlte/base::base-head"></th:block>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="modal fade" id="dialog-account-add">
    <div class="modal-dialog">
        <div class="modal-content"
             style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
            <div class="modal-header">
                <h4 class="modal-title">创建账号</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="/accounts" method="post" data-dialog-close="#dialog-account-add">
                <div class="modal-body">
                    <div class="form-group">
                        <label><span class="text-red">*</span> 用户名</label> <input
                            type="text" class="form-control" name="username" maxlength="16"
                            placeholder="用户名" required="required" autofocus="autofocus">
                    </div>
                    <div class="form-group">
                        <label><span class="text-red">*</span> 用户密码</label> <input
                            type="text" class="form-control" name="password" maxlength="32"
                            placeholder="用户密码" required="required">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default float-left" data-dismiss="modal"
                            style="width: 100px" type="button">取消
                    </button>
                    <button class="btn btn-success float-right" style="width: 100px"
                            type="submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="dialog-account-edit">
    <div class="modal-dialog">
        <div class="modal-content"
             style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
            <div class="modal-header">
                <h4 class="modal-title">修改密码</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="/accounts/" method="put" data-action="id" data-dialog-close="#dialog-account-edit">
                <div class="modal-body">
                    <div class="form-group">
                        <label><span class="text-red">*</span> 用户名</label> <label
                            data-t="username" class="form-control"></label>
                    </div>
                    <div class="form-group">
                        <label><span class="text-red">*</span> 用户密码</label> <input
                            data-v="password" type="text" class="form-control" maxlength="32"
                            name="password" placeholder="用户密码" required="required">
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default float-left" data-dismiss="modal"
                            style="width: 100px" type="button">取消
                    </button>
                    <button class="btn btn-success float-right" style="width: 100px"
                            type="submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="wrapper">
    <th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
    <th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
    <div id="body" class="content-wrapper">
        <th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
        <section class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="card-header">
                        <div class="row mt-2">
                            <button class="btn btn-app" data-dialog="show" data-url="#dialog-account-add">
                                <i class="fas fa-user-plus text-blue"></i> 创建账号
                            </button>

                            <div class="w-100"></div>
                            <div class="input-group mx-2 mb-2">
                                <div class="input-group-prepend">
                                    <button type="submit" class="btn btn-default"
                                            data-get-username="#search-account"
                                            onclick="changeThis(this)">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <input id="search-account" type="text" name="table_search"
                                       class="form-control" placeholder="Search"
                                       autofocus="autofocus" data-get-search="#search-account"
                                       onkeyup="enterThis(this, changeThis)">
                            </div>

                        </div>
                    </div>
                    <div class="card-body" th:with="accountPage=${accountUtils.pageSearch()}">
                        <div class="table-responsive">
                            <table id="account-table"
                                   class="table table-bordered table-hover table-striped">
                                <colgroup>
                                    <col/>
                                    <col width="80"/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr data-th-each="account: ${accountPage.data}">
                                    <td>
                                        <a th:if="${account.userId!=null}" th:href="${'/admin/user?userId='+account.userId}" data-th-utext="${account.username}"></a>
                                        <a th:if="${account.userId==null}" href="#" data-th-utext="${account.username}"></a>
                                    </td>
                                    <td>
										<a title="修改"
										   data-dialog="show"
                                           data-url="#dialog-account-edit"
                                           th:data-dialog-action-id="${account.id}"
                                           th:data-dialog-t-username="${account.username}"> <i
                                            class="fas fa-edit text-blue" style="margin-left: 10px;"></i>
                                    </a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <th:block data-th-replace="/adminlte/base::pageNav(${accountPage},'个账号')"></th:block>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <th:block data-th-replace="/adminlte/base::base-footer"></th:block>
    <th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
</div>
<script src="/kaibes/js/extend.js"></script>
</body>
</html>